import React,{Component} from 'react'
import { Table,Checkbox, Row, Col,Button,Tabs,Card,Select,Icon } from 'antd';
const TabPane = Tabs.TabPane;
const Option = Select.Option;
import {userList, update,userTypeList,roleList,frozen,unfrozen,addRole,delRole,search} from '../../services/userList'
import {dateFormat} from '../../utils/format'
import Search from './searchUser'
import style from './UserList.css'
import RoleList from './roleList'

class Demo extends Component{
    constructor(props){
        super(props)
        
    }
    state = {
        data:[],
        selectedRow:'',
        isSelected:false,
        rowData:{},
        pagination: {},
        loading: false,
        plainOptions:[],
        checkedList:[],
        typeList:[],
        roleList:[],
        filters:[]
    }
    handleTableChange = (pagination, filters, sorter) => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({
          pagination: pager,
        });
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          filters:this.state.filters,
          sortField: sorter.field,
          sortOrder: sorter.order=="ascend"?"asc":"desc",
          ...filters,
        });
      }
      fetch = (params = {}) => {
        this.setState({ loading: true });
        
        userList(params).then(data =>{
          const pagination = { ...this.state.pagination };
          pagination.total = data.total;
          pagination.pageSize = data.per_page
          
          this.setState({
            loading: false,
            data: data.data,
            pagination,
          })
        })
        
      }
      componentDidMount() {
        const data = {
            results:10,
            page:1
        }
        this.fetch(data);
        userTypeList().then(data=>{
            this.setState({
                typeList:data.data,
            })
        });
        
      
      }
    onRowClick=(record, index, event)=>{
        this.setState({
            selectedRow:index,
            isSelected:true,
            rowData:record,
        })
    }
    rowClassName=(record, index,)=>{
        if(this.state.selectedRow === index){
          return 'rowSelected'
        }
        return '';
      }
    handleChange=(record,val)=>{
        const params = {
            id:record.id,
            user_type:val
        }
        update(params).then(data =>{
            if(data.status ===0){
                this.updateTableData(data.data);
                this.setState({
                    rowData:data.data
                })
            }
        })
    
    }
    search=(val)=>{
        this.fetch({
            filters:val,
            results:10,
            page:1
        })
       this.setState({
           filters:val
       })
    }
    clean=()=>{
        this.fetch({
            results:10,
            page:1
        })
        this.setState({
            filters:[]
        })
    }
    frozen=()=>{
        frozen({id:this.state.rowData.id}).then(data =>{
            if(data.status ===0){
                const row = this.state.rowData;
                row.user_status = data.data.user_status;
                this.updateTableData(row);
            }
        })
    }
    unfrozen=()=>{
        unfrozen({id:this.state.rowData.id}).then(data =>{
            if(data.status ===0){
                const row = this.state.rowData;
                row.user_status = data.data.user_status;
                this.updateTableData(row);
            }
        })
        
    }
    
    updateTableData=(row)=>{
        const data= this.state.data;
        data.map((item,index) =>{
            if(item.id==row.id){
                data[index] = row;
            }
        })
        this.setState({
            data:data,
        })
    }
    render(){
        const col = [
            // {title:'',dataIndex:''},
            {title:'用户名称',dataIndex:'username',sorter: true,},
            {title:'组织机构',dataIndex:'org_name',sorter: true,},
            {title:'用户状态',dataIndex:'user_status',sorter: true,
                render:(text,record) =>{
                    return text==1?'正常':'冻结';
                }
            },
            {title:'用户类型',dataIndex:'user_type',sorter: true,
                render: (text, record) => {
                    if(this.state.typeList.length>0){
                        return (
                            <Select defaultValue={`${record.user_type}`} style={{ width: 120 }} onChange={(val)=>this.handleChange(record,val)}>
                            {
                                this.state.typeList.map(item =>{
                                    return (
                                        <Option key={item.id} value={`${item.id}`}>{item.description}</Option>
                                    )
                                })
                            }
                            
                          </Select>
                        )
                    }
                },
            }
        ]
        const rowData = this.state.rowData;
        return (
            <div className="myContainer">
                <Row gutter={16}>
                    <Col xl={{ span: 8 }} md={{ span:8 }}>
                        <Search search={this.search} clean={this.clean} />
                        <Table  size="small" rowKey={record => record.id}
                        columns={col} dataSource={this.state.data} 
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                        onRowClick={this.onRowClick}
                        rowClassName={this.rowClassName}
                        onChange={this.handleTableChange} 
                        bordered
                        style={{marginTop:'10px'}}
                        />
                    </Col>
                    {this.state.isSelected?
                    <Col xl={{ span: 16 }} md={{ span:16 }}>
                        <div >
                            <Tabs defaultActiveKey="1" >
                                <TabPane tab="基本信息" key="1">
                                    <div style={{position:"relative",height: "110px"}}>
                                        <img className={style.img} />
                                        
                                        <h2 style={{marginBottom:'10px'}}>{rowData.username}</h2>
                                        <div style={{position: "absolute",right: "0px",top: "0px"}}>
                                            <Icon type="mail" />
                                            <span> {rowData.email}</span>
                                        
                                        </div>
                                        <div className={style.detail}>
                                            <Icon type="cloud-upload" />
                                            <span>111</span>
                                            <Icon type="cloud-upload" />
                                            <span>
                                            {dateFormat("yyyy-MM-dd hh:mm:ss",rowData.last_login_at)} / {rowData.last_login_ip}
                                            </span>
                                            
                                        </div>
                                        <div className={style['user-dropdown']}>
                                            {
                                                this.state.rowData.user_status===1?<Button type="primary" onClick={this.frozen}>冻结</Button>:<Button onClick={this.unfrozen} style={{background:'red',color:'#fff',borderColor: 'red'}}>解冻</Button>
                                            }
                                            
                                        </div>
                                    </div>
                                    <div className={style.line}></div>
                                    <p style={{marginBottom:'20px'}}>用户角色，可以多选！！</p>
                                    <RoleList rowData={rowData} updateTableData={this.updateTableData} />
                                </TabPane>
                                <TabPane tab="详细信息" key="2" bordered>
                                    <div className={style.tab2}>
                                        <div>
                                            {rowData.username} / 
                                        </div>
                                        <p>电话：{rowData.tel}</p>
                                        <p>手机：{rowData.tel}</p>
                                        <p>微信：{rowData.weixin}</p>
                                        <p>微博：{rowData.weibo}</p>
                                        <p>邮箱：{rowData.email}</p>
                                        <p>地址：{rowData.address}</p> 
                                    </div>                             
                                </TabPane>
                                
                            </Tabs>
                        </div>
                    </Col>:''
                    }
                </Row>
            </div>
            
        )
    }
}

export default Demo